function Snake(el){
    //保存地图对象
    this.el=el
    //蛇节长度
    this.len=20
    // this.move()
    //存蛇
    this.snakeobj=[
        {x:3,y:2,color:'red',el:null},//蛇头
        {x:2,y:2,color:'blue',el:null},//蛇的身体
        {x:1,y:2,color:'blue',el:null}//蛇的身体
    ]
    //方向
    this.direction='right'
}
Snake.prototype.remove=function(){
    for(let i=0;i<this.snakeobj.length;i++){
        if(this.snakeobj[i].el){
            //开始没有保存蛇节对象，所以增加判断
            this.el.removeChild(this.snakeobj[i].el)
            // console.log(this.snakeobj[i].el);
        }
    }

    


}
Snake.prototype.create=function(){
    this.remove()
    //循环遍 历创建蛇
    for(let i=0;i<this.snakeobj.length;i++){
        //创建设、蛇
        let divobj=document.createElement('div')
        divobj.style.width=this.len+'px'
        divobj.style.height=this.len+'px'
        divobj.style.position='absolute'
        divobj.style.left=this.snakeobj[i].x*this.len+'px'
        divobj.style.top=this.snakeobj[i].y*this.len+'px'
        divobj.style.background=this.snakeobj[i].color
        //单独保存下蛇节对象
        this.snakeobj[i].el=divobj

        this.el.appendChild(divobj)
        // console.log(divobj.style.width);

    }

}
//蛇移动
Snake.prototype.move=function(){
        //讲构造函数中蛇的x+1
    //     for(let i=0;i<this.snakeobj.length;i++){
    //     this.snakeobj[i].x +=1
    // }
    //蛇头  蛇身体1   蛇身体2  蛇身体3
    //蛇头 上 y-1
    //蛇头 下 y+1
    //蛇头 左 x-1
    //蛇头 右 x+1
    //动一下  蛇头是键盘方向 3用2的位置  2用1的位置  1用蛇头位置
    //i>0 不含蛇头 （蛇头单独判断）
    for(let i=this.snakeobj.length-1;i>0;i--){
        this.snakeobj[i].x=this.snakeobj[i-1].x
        this.snakeobj[i].y=this.snakeobj[i-1].y
        
    }
    switch(this.direction){
        case 'top':
            this.snakeobj[0].y-=1
            break;
        case 'bottom':
            this.snakeobj[0].y+=1
            break;
        case 'left':
            this.snakeobj[0].x-=1
            break;
        case 'right':
            this.snakeobj[0].x+=1
            break;
    }
    // console.log(snakeX,this.map.width);
    if(this.snakeobj[0].x>39) this.snakeobj[0].x=0
    if(this.snakeobj[0].x<0) this.snakeobj[0].x=39
    if(this.snakeobj[0].y<0) this.snakeobj[0].y=19
    if(this.snakeobj[0].y>19) this.snakeobj[0].y=0



    this.create()
}